<template>
    <div class="qilin-headerNav flex-row qilin-py-1 qilin-px-2">
        <div class="qilin-headerNav-logo flex-row">
            <img src="@/assets/images/image01.jpg" alt="">
            <span class="qilin-pl-1">基层党建教育</span>
        </div>
        <div class="qilin-headerNav-nav flex-row">
            <div class="qilin-headerNav-nav-item qilin-mx-4" v-for="item in menuList" :key="item.path">
                <span @click="navigateTo(item)" :class="[
                    item.path === $route.path ? 'is-active' : ''
                ]">{{item.name}}</span>
            </div>
        </div>
        <div class="qilin-headerNav-user flex-row">
            <img src="@/assets/images/image15.jpeg" alt="">
            <div class="qilin-headerNav-user-text qilin-py-0 qilin-pr-1 qilin-pl-2">
                <p>欢迎</p>
                <p class="qilin-mt-1">{{"荒天帝"}}</p>
            </div>
            <span class="qilin-headerNav-user-box">
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        <i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="exit">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            menuList:[
                {
                    name:"首页",
                    path:"/homepage"
                },
                {
                    name:"新闻纪要",
                    path:"/news"
                },
                {
                    name:"思教课堂",
                    path:"/course"
                },
                {
                    name:"学识检测",
                    path:"/check"
                },
                {
                    name:"组织生活",
                    path:"/organization"
                }
            ]
        }
    },
    methods:{
        //点击标题事件监听
        navigateTo(item){
            this.$router.push(item.path);
        },
        //点击下拉菜单对应事件监听
        handleCommand(val){
            // console.log(val);
            switch(val){
                case "info":
                    this.showUserInfo();
                    break;
                case "exit":
                    this.exit();
                    break;
            };
        },
        //点击个人信息事件监听
        showUserInfo(){
            // console.log("个人信息");
            if(this.$route.path !== "/userInfo"){
                this.$router.push({
                    path:"/userInfo"
                });
            };
        },
        //点击退出事件监听
        exit(){
            this.$confirm("确认退出系统吗？","温馨提示",{
                showCancelButton:true,
                closeOnClickModal:false,
                type:"warning"
            }).then(()=>{
                //回到登录页面
                this.$router.push("/login");
            }).catch(()=>{
                console.log("取消退出操作");
            });
        },
    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.qilin-headerNav{
    @include QilinWidthHeight(100%,4.286rem);
    min-width:42.857rem;
    background-color:#742224;
    color:#fff;
    align-items:center;
    >.qilin-headerNav-logo{
        align-items:center;
        >img{
            width:24px;
            height:24px;
        }
    }
    >.qilin-headerNav-nav{
        flex:1;
        justify-content:center;
        >.qilin-headerNav-nav-item{
            cursor:pointer;
            >span{
                font-size:$medium-text-size;
                position:relative;
                &.is-active::before{
                    position:absolute;
                    content:"";
                    bottom:-10px;
                    left:0;
                    width:100%;
                    height:2px;
                    background-color:#b8746d;
                }
            }
        }
    }
    >.qilin-headerNav-user{
        align-items:center;
        >img{
            width:24px;
            height:24px;
            border-radius:$radius-circle;
        }
        >.qilin-headerNav-user-text{
            text-align:center;
            >p:last-child{
                color:#fff;
                font-weight:bolder;
            }
        }
        >.qilin-headerNav-user-box{
            >.el-dropdown{
                color:#fff;
            }
        }
    }
}
</style>
